<template>
  <div class="personal">
    <myHeader></myHeader>
    <!-- 用户信息 -->
    <div class="info">
      <el-descriptions
        class="margin-top"
        title="用户信息"
        :column="3"
        :size="size"
      >
        <div
          slot="extra"
          @click="$router.push('/EditPersonInfo?id=' + user.id)"
        >
          <el-button
            type="primary"
            size="medium"
            style="background-color: #00b8e0"
            @click="edit"
          >
            修改
          </el-button>
        </div>
        <el-descriptions-item label="头像">
          <el-avatar :size="50" :src="user.avatarUrl"></el-avatar>
        </el-descriptions-item>
        <el-descriptions-item label="用户名">
          {{ user.nikeName }}
        </el-descriptions-item>
        <el-descriptions-item label="性别">{{
          this.user.gender == 0 ? "女" : "男"
        }}</el-descriptions-item>
        <el-descriptions-item label="账号">
          {{ user.userName }}
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <!-- 用户信息结束 -->
    <!-- 用户内容 -->
    <div class="user-main">
      <div class="main-left">
        <div class="manu">
          <ul>
            <li><div @click="changeNav(1)">我的房源</div></li>
            <li><div @click="changeNav(2)">我的消息</div></li>
            <li><div @click="changeNav(3)">我的租房</div></li>
            <li><div @click="changeNav(4)">我的室友</div></li>
            <li><div @click="changeNav(5)">我的帖子</div></li>
            <li><div @click="changeNav(6)">我的评价</div></li>
            <li><div @click="changeNav(7)">往期租房</div></li>
          </ul>
        </div>
      </div>
      <div class="main-right" v-if="Index == 1"><myhouse></myhouse></div>
      <div class="main-right" v-if="Index == 2"><mynews></mynews></div>
      <div class="main-right" v-if="Index == 3"><myrent></myrent></div>
      <div class="main-right" v-if="Index == 4"><myroomie></myroomie></div>
      <div class="main-right" v-if="Index == 5"><mypost></mypost></div>
      <div class="main-right" v-if="Index == 6"><usercom></usercom></div>
      <div class="main-right end" v-if="Index == 7"><PreRent></PreRent></div>
    </div>
    <!-- 用户内容结束 -->
  </div>
</template>

<script>
import myHeader from "../../components/myHeader.vue";
import myhouse from "../../views/user/myhouse.vue";
import mynews from "../../views/user/mynews.vue";
import myroomie from "../../views/user/myroomie.vue";
import mypost from "../post/mypost.vue";
import request from "@/utils/request";
import Myroomie from "../../views/user/myroomie.vue";
import usercom from "../user/usercom.vue";
import myrent from "../user/myrent.vue";
import PreRent from "../user/PreRent.vue";
export default {
  components: {
    myHeader,
    myhouse,
    mypost,
    mynews,
    myroomie,
    Myroomie,
    usercom,
    myrent,
    PreRent,
  },
  data() {
    return {
      Index: 1,
      size: "",
      tabPosition: "left",
      circleUrl:
        "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",

      //获取localStorage中保存的后台返回的用户信息
      user: localStorage.getItem("user")
        ? JSON.parse(localStorage.getItem("user"))
        : {},
    };
  },
  mounted() {
    this.init();
  },
  created() {
    request.get("/user/" + this.user.id).then((res) => {
      this.user = res.data;
    });
  },
  methods: {
    init() {
      console.log(this.user);
    },
    changeNav(index) {
      if (index == 1) {
        this.Index = 1;
      } else if (index == 2) {
        this.Index = 2;
      } else if (index == 3) {
        this.Index = 3;
      } else if (index == 4) {
        this.Index = 4;
      } else if (index == 5) {
        this.Index = 5;
      } else if (index == 6) {
        this.Index = 6;
      } else if (index == 7) {
        this.Index = 7;
      }
    },
    edit() {
      this.$router.push("/EditPersonInfo");
    },
  },
};
</script>

<style scoped>
.info {
  width: 700px;
  margin: auto;
  margin-top: 50px;
}

.el-descriptions__body {
  /* background-color: aliceblue !important; */
  border-radius: 5px;
}
/* tab开始 */
.user-main {
  width: 1000px;
  margin: 0 auto;
  padding: 30px 0;
  position: relative;
}
/* 左边 */
.user-main .main-left {
  width: 150px;
  border: 1px solid #e6e5e5;
  /* padding: 35px 0 9px; */
  background-color: #fff;
  position: absolute;
  height: 348px;
}
ul {
  position: absolute;
  width: 150px;
  left: 50%;
  margin-left: -115px;
}
.user-main .main-left ul li {
  width: 152px;
  height: 40px;
  position: relative;
  text-align: center;
  list-style: none;
  margin: 5px 0px;
}
.user-main .main-left ul li:hover {
  background-color: #8cbfcc;
  font-weight: 600;
  color: #fff;
}

.user-main .main-left ul li div {
  width: 60px;
  height: 40px;
  line-height: 40px;
  margin: 0 auto;
  display: inline-block;
  text-align: left;
  color: #555;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
}
.manu {
  position: relative;
}
/* 右边 */
.user-main .main-right {
  box-shadow: 0 1px 2px rgb(0 0 0 / 15%);
  padding: 35px;
  background-color: #fff;
  border: 1px solid #e6e5e5;
  width: 755px;
  position: absolute;
  margin-left: 160px;
}

/* tab结束 */
</style>